<template>
  <div class="main flex-row w-100P h-100P">
    <div class="flex-sub menu-children h-100P">
      <div class="menu-top">
        <el-dropdown trigger="click" @command="handleCommand" class="custom-btn">
          <div class="custom-btn-text">
            添加菜单
            <i class="el-icon-arrow-down el-icon--right" />
          </div>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="Peer">添加同级菜单</el-dropdown-item>
            <el-dropdown-item command="Sub">添加子菜单</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="custom-btn " @click="handleToCal">
          <span class="custom-btn-text">
            <i class="el-icon-s-unfold el-icon--left" />
            收起全部
          </span>
        </div>
      </div>
      <div class="filter-input-container">
        <el-input
          v-model="filterText"
          suffix-icon="el-icon-search"
          placeholder="输入关键字进行过滤"
          class="w-100P margin-lr-20"
        />
      </div>

      <el-tabs v-model="activeTab" class="tabs" @tab-click="filterText = ''">
        <el-tab-pane label="前台" name="FRONT">
          <el-tree
            ref="FRONT"
            class="tree flex-sub"
            node-key="id"
            :data="frontTreeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          />
        </el-tab-pane>
        <el-tab-pane label="后台" name="MANEGE">
          <el-tree
            ref="MANEGE"
            node-key="id"
            class="tree flex-sub"
            :data="manegeTreeData"
            :props="defaultProps"
            :filter-node-method="filterNode"
            @node-click="handleNodeClick"
          />
        </el-tab-pane>
      </el-tabs>
    </div>

    <div class="mg-left-20 flex-sub menu-children">
      <div v-if="select">
        <div class="menu-top">编辑菜单：{{ select.name }}</div>
        <!-- <el-divider /> -->
        <el-form
          :model="select"
          ref="menuInfoForm"
          label-width="100px"
          :rules="Rules"
          class="mg-top-20  pd-lr-20"
        >
          <el-form-item label="类型" style="text-align: left;">侧边栏菜单</el-form-item>
          <el-form-item label="标题" prop="name">
            <el-input v-model="select.name" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item label="副标题">
            <el-input v-model="select.subName" placeholder="请输入副标题" />
          </el-form-item>
          <el-form-item label="路径" prop="path">
            <el-input v-model="select.path" placeholder="请输入路径" />
          </el-form-item>
          <el-form-item label="排序" prop="orderNumber">
            <el-input-number
              style="width: 100%;"
              v-model="select.orderNumber"
              :min="0"
              :controls="false"
              placeholder="数字越大排序越前"
            ></el-input-number>
          </el-form-item>
          <div style="text-align: center;">
            <SubButton @subClick="change"></SubButton>
            <CancelButton @cancelClick="del" title="删除"></CancelButton>
          </div>
        </el-form>
      </div>
      <div v-else class="">
        <div class="menu-top pd-lr-20">菜单编辑栏</div>
        <!-- <h3 style="margin-top: 20px">
          <i class="el-icon-menu" style="color: blue" />菜单编辑栏
        </h3> -->
        <!-- <el-divider /> -->
        <p class="ivu mg-lr-20">从菜单列表选择一项后，进行编辑</p>
      </div>
    </div>

    <el-dialog
      title="添加菜单"
      :visible.sync="addMenudialogVisible"
      :width="handleScreenWidthToVw(574)+'px'"
      :close-on-click-modal="false"
    >
      <el-form
        ref="menuForm"
        :model="form"
        :label-width="handleScreenWidthToVw(120)+'px'"
        :rules="Rules"
      >
        <el-form-item label="上级菜单">
          <!-- eslint-disable-next-line vue/this-in-template -->
          <div style="text-align: left;">{{ this.pidName }}</div>
        </el-form-item>
        <el-form-item label="标题" prop="name">
          <el-input class="form-input-width" v-model="form.name" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="副标题">
          <el-input class="form-input-width" v-model="form.subName" placeholder="请输入副标题" />
        </el-form-item>
        <el-form-item label="路径" prop="path">
          <el-input class="form-input-width" v-model="form.path" placeholder="请输入路径" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer flex-row-center">
        <el-button type="primary" @click="subFrom">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuList, addMenuList, delMenuList, updateMenuList } from './api'
import { tree } from '@/utils/tree'
import { Message } from 'element-ui'
import { handleScreenWidthToVw } from '@/utils/tools'
import CancelButton from '@/components/cancel-button'
import SubButton from '@/components/sub-button'

export default {
  components: { CancelButton, SubButton },
  data() {
    return {
      filterText: '',
      parent: null,
      pidName: '',
      activeTab: 'FRONT',
      addMenudialogVisible: false,
      select: null,
      frontTreeData: [],
      manegeTreeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      form: { name: '', subName: '', path: '', pid: '0' },
    }
  },
  computed: {
    handleScreenWidthToVw() {
      return handleScreenWidthToVw
    },
    Rules() {
      return {
        name: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
      }
    },
  },
  watch: {
    filterText(val) {
      this.$refs[this.activeTab].filter(val)
    },
    activeTab(newValue) {
      this.getData(newValue)
      this.select = null
    },
  },
  created() {
    this.getData(this.activeTab)
  },
  methods: {
    //
    // 删除按钮
    del() {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        delMenuList(this.select.id).then(() => {
          this.select = null
          this.getData(this.activeTab)
          this.$message.success('删除成功！')
        })
      })
    },
    // 提交修改按钮
    async change() {
      await this.$refs.menuInfoForm.validate()
      await updateMenuList(this.select)
      this.getData(this.activeTab)
      this.$message.success('修改成功！')
    },
    // 取消按钮
    cancel() {
      this.$refs.menuForm.resetFields()
      this.addMenudialogVisible = false
    },
    // 提交新增菜单
    async subFrom() {
      await this.$refs.menuForm.validate()
      await addMenuList({ ...this.form, menuTypeEnum: this.activeTab })
      this.getData(this.activeTab)
      this.select = null
      this.form = { name: '', subName: '', path: '', pid: '0' }
      this.addMenudialogVisible = false
    },
    // 选择新增菜单类型
    handleCommand(command) {
      if (command === 'Peer') {
        this.addPeer()
      } else {
        this.addSubordinate()
      }
    },
    // 新增同级按钮
    addPeer() {
      this.title = '新增同级菜单'
      if (this.select) {
        this.pidName = this.parent.name
        this.form.pid = this.select.pid
        this.addMenudialogVisible = true
      } else {
        this.select = { name: null, subName: null, path: null }
        this.pidName = '无上级'
        this.addMenudialogVisible = true
      }
    },
    // 新增下级按钮
    addSubordinate() {
      if (this.select) {
        this.title = '新增子菜单'
        this.pidName = this.select.name
        this.form.pid = this.select.id
        this.addMenudialogVisible = true
      } else {
        Message.error('请先选择菜单')
      }
    },
    //
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    // 选择树
    handleNodeClick(data, e) {
      this.select = { ...data }
      this.parent = e.parent.data
    },
    // 获取数据
    async getData(menuTypeEnum) {
      const res = await getMenuList({ menuTypeEnum })
      this.frontTreeData = tree(
        res.filter(item => {
          return item.menuTypeEnum === 'FRONT'
        })
      )
      this.manegeTreeData = tree(
        res.filter(item => {
          return item.menuTypeEnum === 'MANEGE'
        })
      )
    },
    handleToCal() {
      const nodes = this.$refs[this.activeTab].store._getAllNodes()
      for (const i in nodes) {
        nodes[i].expanded = false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.main {
  background: #f3f4f8;
}

.tabs {
  padding: 0 vw(20px);
}

.menu-children {
  flex-shrink: 0;
  background: #fff;
  // padding-right: 20px;
}

.tree {
  height: vh(700px);
  overflow: auto;
}

.ivu {
  position: relative;
  padding: vh(8px) vw(48px) vh(8px) vw(16px);
  margin-bottom: vh(10px);
  font-size: vw(14px);
  line-height: vh(16px);
  color: #515a6e;
  background-color: #f0faff;
  border: 1px solid #abdcff;
  border-radius: 4px;
}

.filter-input-container {
  padding: vh(20px) vw(20px);
}

.custom-btn {
  padding: vw(10px) vw(20px);
  font-size: vw(14px);
  background: #f2f2f2;
  border: 1px solid #cccccc;
  border-radius: 4px;
  color: #333;

  &:hover {
    cursor: pointer;
  }
}

.custom-btn + .custom-btn {
  margin-left: vw(20px);
}

.menu-top {
  display: flex;
  height: 80px;
  padding-left: vw(20px);
  font-size: vw(14px);
  color: #333;
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  align-items: center;
  flex-direction: row;
}

::-webkit-scrollbar {
  width: vw(10px);
  height: vh(1px);
}

::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  transition: background 1s;
}

::-webkit-scrollbar-track {
  background: #ededed;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}
.form-input-width {
  width: vw(250px);
}
::v-deep {
  .el-tree-node__label {
    font-size: vw(12px);
  }

  .el-form-item {
    margin-bottom: vh(22px);
  }

  .el-form-item__label {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-input-number .el-input__inner {
    text-align: left;
  }

  .el-form-item__content {
    font-size: vw(14px);
    line-height: vh(40px);
  }

  .el-dialog__title {
    font-size: vw(18px);
    line-height: vh(24px);
  }

  .el-tabs__item {
    font-size: vw(14px);
  }

  .el-form-item {
    margin-bottom: vh(22px);
  }

  .el-button {
    font-size: vw(14px);
  }

  .el-dialog__footer {
    padding: vh(10px) vw(20px) vw(20px);
    text-align: center;
  }
  .el-dialog__body {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: vh(20px);
  }

  .el-input {
    font-size: vw(14px);
  }

  .el-tree-node__content {
    margin: vh(2px) auto;
  }
}
</style>
